<template>
    <section class="area_share_Server layout flexbox">
  			<!--三栏布局-->
  		<article class="left-center-right">
	        <div class="left">
	        	<div class="basc_info">
	        		<p class="left_item_title"><span></span>基本信息</p>
		        	<p><span class="span_title">服务名称</span><span class="span_text">身份证查询服务</span></p>	
		        	<p><span class="span_title">返回信息类别</span><span  class="span_text">身份证查询服务</span></p>	
		        	<p>
		        		<span  class="span_title">所属网段</span>
		        		<span  class="span_text">公安网</span>
		        		<span  class="span_title">所属区域</span>
		        		<span  class="span_text">区域1</span>
		        	</p>	
		        	<p>
		        		<span  class="span_title">所属业务类别</span>
		        		<span  class="span_text">经侦</span>
		        		<span  class="span_title">服务方</span>
		        		<span  class="span_text">XXX公安局</span>
		        	</p>	
	        	</div>
	        	
	        	<div class="request_all">
	        		<p class="left_item_title"><span></span>请求汇总</p>
		        	<div class="all_time">
		        		<p class="all_time_num">21245</p>
		        		<p class="all_time_text">总请求次数</p>
		        	</div>
		        	<el-row>
					  <el-col :span="8">
					  	<p class="all_time_num">212</p>
		        		<p class="all_time_text">本次请求</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">50</p>
		        		<p class="all_time_text">本月请求</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">4</p>
		        		<p class="all_time_text">本周请求</p>
					  </el-col>
					</el-row>
	        	</div>
	        	
	        	
	        	<div class="same_paiming">
	        		<p class="left_item_title"><span></span>同类排名</p>
		        	<el-row class="same_paiming_row">
					  <el-col :span="8">
					  	<p class="all_time_num">经侦</p>
		        		<p class="all_time_text">业务类别</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">14个</p>
		        		<p class="all_time_text">同类服务</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">2</p>
		        		<p class="all_time_text">上月排名</p>
					  </el-col>
					</el-row>
					<el-row class="same_paiming_row">
					  <el-col :span="8">
					  	<p class="all_time_num">32</p>
		        		<p class="all_time_text">本月排名</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">2</p>
		        		<p class="all_time_text">本月增长</p>
					  </el-col>
					  <el-col :span="8">
					  	<p class="all_time_num">14%</p>
		        		<p class="all_time_text">本月增长率</p>
					  </el-col>
					</el-row>
	        	</div>
	        	
	        	<div class="apply_time">
	        		<p class="left_item_title"><span></span>响应时间</p>
	        		<div class="chooseDate">
	        			 	<el-date-picker
						      v-model="applyTimeChooseYear"
						      type="year"
						      placeholder="选择年">
						    </el-date-picker>
	        		</div>
	        		<echart-pie :className="applyTimeClassName"  :diyOption="optionLine" :idName="applyTimeId"></echart-pie>
	        	</div>
	        	
	        </div>
	        <div class="center">
	         		<div class="dangan_guiji">
	         			<p class="left_item_title"><span></span>档案轨迹</p>
	         			<div class="guding-500" >
	         			<img  style="width: 100%;" src="../../../images/areaRecource/areaRecource01_05.png"/>
	         			<div class="dangan_guiji_div-1">
	         				
	         			</div>
		         			<span class="dangan_guiji_span-1 dangan_guiji_span">黄明明</span>
		         			<span class="dangan_guiji_span-2 dangan_guiji_span">2018/08/01</span>
		         			<span class="dangan_guiji_span-3 dangan_guiji_span">张三</span>
		         			<span class="dangan_guiji_span-4 dangan_guiji_span">2018/09/25</span>
		         			<span class="dangan_guiji_span-5 dangan_guiji_span">80</span>
		         			<span class="dangan_guiji_span-6 dangan_guiji_span">34</span>
		         			<span class="dangan_guiji_span-7 dangan_guiji_span">23</span>
		         			<span class="dangan_guiji_span-8 dangan_guiji_span">xxx公安局</span>
	         			</div>
	         		</div>
	         		
	         		
	         		<div class="healthy_riji">
	         			<p class="left_item_title"><span></span>健康日志</p>
	         			<echart-pie :className="applyTimeClassName"  :diyOption="optionLine2" :idName="healThyId"></echart-pie>

	         			
	         		</div>
	        </div>
	        <div class="right">
	        	<div class="request_total">
	        		<p class="left_item_title"><span></span>请求方统计</p>
	        		<echart-pie :className="requestTotaClassName" :diyOption="optionPie" :idName="requestTotalId"></echart-pie>
	        		<div class="request_total_detail">
	        			<p><span class="request_total_detail_pie" style="background: #0090ff;"></span><span>广州社保局</span></p>
	        			<p><span class="request_total_detail_pie" style="background: #ff8a18;"></span><span>广州房管局</span></p>
	        			<p><span class="request_total_detail_pie" style="background: #33ff18;"></span><span>天河派出所</span></p>
	        			<p><span class="request_total_detail_pie" style="background: #18fcff;"></span><span>广州政务中心</span></p>
	        		</div>
	        	</div>
	        	
	        	
	        	<div class="request_time">
	        		<p class="left_item_title"><span></span>请求次数</p>
	        		<div class="chooseDate">
	        			 	<el-date-picker
						      v-model="requestTimeChooseYear"
						      type="year"
						      placeholder="选择年">
						    </el-date-picker>
	        		</div>
	        		<echart-pie :className="requestTimeClassName"  :diyOption="optionBar" :idName="requestTimeId"></echart-pie>
	        	</div>
	        	
	        	
	        	<div class="server_quarce">
	        		<p class="left_item_title"><span></span>服务质量</p>
	        		<div class="server_quarce_title">
	        			<span><i class="fuwuzhiliang"></i>服务质量</span>
	        			<span><i class="pingjunfuwuzhiliang"></i>平均服务质量</span>
	        		</div>
	        		<echart-pie :className="serverQuarceClassName"  :diyOption="optionRadra" :idName="serverQuarceId"></echart-pie>
	        	</div>
	        	
	        </div>
      </article>

    </section>
</template>

<script>
    import echartPie from "./echartPie"
//  import {color1,color2} form "./"
	import echarts from 'echarts';
    export default {
    	components:{
    		echartPie
    	},
        data() {
          return {
          		healThyId:'healThyId',
          		applyTimeId:'applyTimeId',
          		serverQuarceId:'serverQuarceId',
          		requestTimeId:'requestTimeId',
          		requestTotalId:'requestTotalId',
          		applyTimeClassName:'chats_line',
          		serverQuarceClassName:"chats_radra",
          		requestTimeClassName:'echats_bar',
          		requestTotaClassName:'echats_bing',
          		requestTimeChooseYear:'',
          		applyTimeChooseYear:'',
          		optionPie : {
				    title : {
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        type: 'scroll',
				        orient: 'vertical',
				        right: 10,
				        top: 20,
				        bottom: 20,
				
				        
				    },
				    color:['#0090ff', '#ff8a18','#33ff18','#18fcff'],
				    series : [
				        {
				            name: '姓名',
				            type: 'pie',
				            radius : '55%',
				            radius: ['50%', '70%'],
				            center: ['40%', '50%'],
				            data: [
				                {name:"广州",value:'333'},
				                {name:"放光",value:'111'},
				                {name:"政务",value:'222'},
				                {name:"天河",value:'555'},
				                ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				},
				optionBar :{
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : ['1月','','','4月','','','7月','','','10月','','12月'],
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '30%',
				            data:[12,23,54,21,12,33,51,52,23,32,51,54],
				            itemStyle:{
				                  normal:{
				                    color:'#0090ff',
				                     barBorderRadius:[10, 10, 10, 10],
				                  }, //柱形图圆角，初始化效果
				                 
				
				            }
				
				        }
				    ]
				},
				optionRadra:{
				    tooltip: {},
				    legend: {
//				        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
				    },
				    color:["#ff9c00",'#0090ff'],
				    radar: {
				        // shape: 'circle',
				        name: {
				            textStyle: {
				                color: '#fff',
				                backgroundColor: '#999',
				                borderRadius: 3,
				                padding: [3, 5]
				           }
				        },
				        indicator: [
				           { name: '销售', max: 6500},
				           { name: '管理', max: 16000},
				           { name: '信息技术', max: 30000},
				           { name: '客服', max: 38000},
				           { name: '研发', max: 52000},
				        ]
				    },
				    series: [{
				        type: 'radar',
				        // areaStyle: {normal: {}},
				        data : [
				            {
				                value : [4300, 10000, 28000, 35000, 50000, 19000],
				                name : '预算分配（Allocated Budget）',
				                areaStyle: {
				                        normal: {
				                            opacity: 0.2,
				                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
				                                {
				                                    color: '#ff9c00',
				                                    offset: 1,
				                                    opacity:0.1
				                                },
				                            ])
				                        }
				                }
				            },
				            {
				                value : [5000, 14000, 28000, 31000, 42000, 21000],
				                name : '实际开销（Actual Spending）',
				                     areaStyle: {
				                        normal: {
				                            opacity: 0.2,
				                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
				                                {
				                                  color: '#0090ff',
				                                  offset: 0,
				                                  opacity:0.1
				                                },
				                                
				                            ])
				                        }
				                    }
				            }
				        ]
				    }]
				},
				optionLine :{
				    xAxis: {
				        type: 'category',
				        data: [ '1月', '', '', '4月', '','6月', '', '', '9月', '', '', '12月']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
					    {
					        data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#0090ff',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 3,
					                borderColor: 'white',
					                color: '#0090ff'
					            }
					        }
					    }
				    ]
				},
				optionLine2 :{
				    xAxis: {
				        type: 'category',
				        data: [ '1月', '', '', '4月', '','6月', '', '', '9月', '', '', '12月']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
					    {
					        data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#0090ff',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 3,
					                borderColor: 'white',
					                color: '#0090ff'
					            }
					        }
					    },
					    {
					        data: [110, 200, 155, 70, 50, 160,310,129, 288, 190, 180, 170],
					        type: 'line',
					        symbol: "circle",
					        symbolSize: 10,
					        lineStyle: {
					            normal: {
					                color: '#ff9c00',
					                width: 4,
					            }
					        },
					        itemStyle: {
					            normal: {
					                borderWidth: 3,
					                borderColor: 'white',
					                color: '#0090ff'
					            }
					        }
					    }
				    ]
				},
          		
          };
        },
        methods: {
        
        }
  };
</script>

<style scoped="scoped">
	
	.healthy_riji{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 300px;
		margin-top: 10px;
		background: #fff;
	}
	/***********************************************/
	
	
	@media only screen and (min-width: 1600px) and (max-width:1920px){
			span.dangan_guiji_span-8.dangan_guiji_span {
        left: 86px;
    	top: 136px;
	}
	span.dangan_guiji_span-7.dangan_guiji_span {
        left: 90px;
    	top: 275px;
	}
	span.dangan_guiji_span-6.dangan_guiji_span {
   		left: 237px;
    	top: 320px;
	}
	span.dangan_guiji_span-5.dangan_guiji_span {
	   top: 320px;
    	left: 398px;
	}
	span.dangan_guiji_span-3.dangan_guiji_span {
	        left: 441px;
    	top: 174px;
	}
	span.dangan_guiji_span-4.dangan_guiji_span {
	        left: 511px;
	    top: 234px;
		}
	span.dangan_guiji_span-2.dangan_guiji_span {
	       top: 98px;
    left: 355px;
	}
	span.dangan_guiji_span-1.dangan_guiji_span{
	    top: 58px;
    	left: 238px;
	}
	.guding-500 {
		position: relative;
	    width: 650px;
	    margin: 0 auto;
	}
	}

	
	/*************媒体查询****************/
	@media screen and (min-width: 1366px) and (max-width:1599px) {
	   	.guding-500 {
			position: relative;
		    width: 420px;
		    margin: 0 auto;
		}
		span.dangan_guiji_span-1.dangan_guiji_span{
		        top: 34px;
    		left: 148px;
		}
		span.dangan_guiji_span-8.dangan_guiji_span {
        	    left: 48px;
    			top: 86px;
		}
		span.dangan_guiji_span-7.dangan_guiji_span {
	            left: 56px;
    			top: 176px;
		}
		span.dangan_guiji_span-6.dangan_guiji_span {
	   		    left: 150px;
    			top: 204px;
		}
		span.dangan_guiji_span-5.dangan_guiji_span {
		      top: 203px;
    			left: 255px;
		}
		span.dangan_guiji_span-3.dangan_guiji_span {
		         left: 282px;
    			top: 109px;
		}
		span.dangan_guiji_span-4.dangan_guiji_span {
		          left: 318px;
    				top: 148px;
			}
		span.dangan_guiji_span-2.dangan_guiji_span {
		          top: 61px;
    			left: 222px;

		}
	}

	.dangan_guiji_span{
		position: absolute;
		font-size: 12px;
		color: #333;
	}
	/***********************************/
	.dangan_guiji{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		background: #fff;
	}
	.apply_time{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 300px;
		margin-top: 10px;
		background: #fff;
	}
	
	/*************************************/
	.server_quarce_title {
	    position: absolute;
	    top: 15px;
	    width: 300px;
	    left: 50%;
	    margin-left: -150px;
	}
	.server_quarce_title i.fuwuzhiliang{
		background: #ff9c00;
	}
	.server_quarce_title i.pingjunfuwuzhiliang{
		background: #0090ff;
	}
	.server_quarce_title i {
	    display: inline-block;
	    width: 19px;
	    height: 6px;
	    border-radius: 3px;
	    vertical-align: super;
	    /* line-height: 10px; */
	    height: 5px;
	    margin: 0 5px 0 20px;
	}
	.server_quarce_title {
	    text-align: center;
	    font-size: 13px;
	}
	.server_quarce{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 300px;
		margin-top: 10px;
		background: #fff;
	}
	/*************************/
	.chooseDate {
	    position: absolute;
	    right: 30px;
	    top: 10px;
	}
	.request_time{
		margin-top: 10px;
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 250px;
		background: #fff;
	}
	/****************************/
	span.request_total_detail_pie {
	    display: inline-block;
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
	    vertical-align: baseline;
	    margin-right: 10px;
	}
	.request_total_detail p{
		margin: 10px 0;
	}
	.request_total_detail {
	    position: absolute;
	    top: 30px;
	    right: 15px;
	    font-size: 14px;
	}
	.request_total{
		position: relative;
		font-size: 16px;
		padding: 10px 15px;
		height: 250px;
		background: #fff;
	}
	/******************/
	.same_paiming_row.el-row {
	    margin: 15px 0;
	}
	.same_paiming .left_item_title{
		margin: 10px 0;
	}
	.same_paiming{
		margin-top: 10px;
		font-size: 16px;
		padding: 10px 15px;
		height: 190px;
		background: #fff;
	}
	
	/****************************/
	.all_time .all_time_text{
		margin-bottom: 12px;
	}
	.all_time .all_time_num{
		font-size: 30px;
	}
	.all_time_num{
	    text-align: center;
	    font-size: 20px;
	    color: #2576c5;
	}
	.all_time_text{
		text-align: center;
	}
	.request_all .left_item_title{
		margin: 10px 0;
	}
	.request_all{
		margin-top: 10px;
		font-size: 16px;
		padding: 10px 15px;
		height: 190px;
		background: #fff;
	}
	
	/*****************************/
	
	span.span_text {
	    margin-right: 50px;
	}
	span.span_title {
		    color: #8e8e8e;
		    padding-right: 20px;
		}
	.left_item_title span{
		width: 3px;
	    height: 15px;
	    display: inline-block;
	    background: #2576c5;
	    vertical-align: middle;
	    margin-right: 5px;
	}
	.basc_info p{
		
		margin: 10px 0;
		
	}
	.basc_info{
		font-size: 16px;
		padding: 10px 15px;
		height: 190px;
		background: #fff;
	}
/*************************************/
        .layout.flexbox{
          margin-top: 15px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 400px;
          /*background: red;*/
        }
        .layout.flexbox .center{
          flex:1;
          margin: 0 10px;
        }
        .layout.flexbox .right{
          width: 470px;
          /*background: blue;*/
        }
      </style>
